<template>
  <!--
      1. 基本上传,显示
      2. 回显
      3. 删除
      4. 进度条
      5. 预览

    -->
  <div>
    <div class="app">
      <el-upload :show-file-list="false" class="Uploadsc" action="#" :http-request="httprequest">
        <img v-if="value" v-imgeroor="" :src="value" alt="">
        <!-- 点击上传图标 -->
        <i v-else class="el-icon-plus i" />
      </el-upload>
      <!-- 删除图标 -->
      <i v-if="value" class="del el-icon-delete-solid" @click="del" />
      <!-- 预览图标 -->
      <i v-if="value" class="big el-icon-zoom-in" @click="dialogshow = true" />

      <!-- 进度条 -->
      <transition name="xxx">
        <el-progress v-if="jdt" type="circle" :percentage="percentage" class="progress" :width="100" />
      </transition>
      <!-- 预览 -->
      <el-dialog title="预览" :visible.sync="dialogshow">
        <img v-imgeroor="" :src="value" alt="" class="img">
      </el-dialog>
    </div>

  </div>

</template>

<script>
import COS from 'cos-js-sdk-v5'
const cos = new COS({
  SecretId: 'AKIDQvFQOBnFV7cBnDSW4SfgkdaZM7qOuMcf',
  SecretKey: 'vgFbliRvELI3byDF3jNvLahswpX8Venn'
})
export default {
  name: 'Uploadsc',

  props: {
    value: {
      type: String
    }
  },

  data() {
    return {

      // 预览显示隐藏
      dialogshow: false,

      // 进度条显示隐藏
      jdt: false,
      // 进度条初始值
      percentage: 0
    }
  },
  methods: {
    // 删除图片

    del() {
      this.$confirm('确认删除吗').then(() => {
        this.$emit('input', '')
      })
    },

    httprequest(res) {
      // 上传时显示进度条
      this.jdt = true
      // 初始化进度条，防止第二次还是第一次值
      this.percentage = 0

      const file = res.file
      console.log(file)
      cos.uploadFile({
        Bucket: 'htxm-1378475765', /* 填写自己的 bucket，必须字段 */
        Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 */
        Key: file.name, /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
        Body: file, // 上传文件对象
        SliceSize: 1024 * 1024 * 1, /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */
        onProgress: (progressData) => {
          console.log(JSON.stringify(progressData))

          // 设置进度条
          this.percentage = progressData.percent * 100

          // 判断进度条100隐藏
          // 图片小看不到进度条太快了，设置定时器
          if (progressData.percent === 1) {
            setTimeout(() => {
              this.jdt = false
            }, 500)
          }
        }
      }, (err, data) => {
        if (err) {
          console.log('上传失败', err)
        } else {
          this.$emit('input', 'http://' + data.Location)
          console.log('上传成功')
        }
      })
    }
  }

}
</script>

<style scoped lang="scss">
.xxx-enter{
  opacity: 0;
}
.xxx-enter-active,.xxx-leave-active{
  transition: all 1s ;
}

.xxx-leave-to{
  opacity: 0;
}

.app {

  position: relative;
  display: inline-block;

  &:hover {

    .del,.big {
      display: inline-block;
    }
  }

  .del,.big {
    position: absolute;
    display: none;
    top: 4px;
    right: 3px;
  }

  .big {
    position: absolute;
    display: none;
    top: 45px;
    left: 45px;
  }
  .progress{
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
  }

}

.Uploadsc {
  overflow: hidden;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #6a92a2;

  .i {

    font-size: 20px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
</style>
